// 很古老的写法，现在都用hooks了
import React, { Component } from "react";
import PropTypes from "prop-types"; //类型检查
import ReactDOM from "react-dom";
import * as redux from "redux";
import {
  Provider,
  connectAdvanced,
  ReactReduxContext,
  connect,
  // useDispatch,
  useSelector as useSelectorRaw,
  // useStore,
  createDispatchHook,
  createSelectorHook,
  createStoreHook,
  shallowEqual,
  batch,
} from "react-redux";
import {
  HashRouter as Router,
  Link,
  Route,
  BrowserRouter,
} from "react-router-dom";

import {
  useStore,
  useDispatch,
  useSelector,
  MyProvider,
  MyContext
} from "./store";

console.log(useStore, 11, useDispatch, 22, MyProvider, 33, useSelector)

function Home(props) {
  console.log(props)

  const store = useStore()
  // const dispatch = store.dispatch
  const dispatch = useDispatch()
  console.log(store.getState())

  const count = useSelectorRaw(state => state.count) // 全局的
  const count2 = useSelector(state => state.count) // 局部的

  return (
    <div>
      <ul className="menu">
        <li>
          <Link to="/Home">home</Link>
        </li>
      </ul>

      <div>全局的和局部的互不干扰</div>

      <div>全局的raw count: {count}</div>
      <div>局部的local count: {count2}</div>


      <MyContext.Consumer>
        {(props) => {
          console.log('consumer props',props); // 这里的props获取不到  React.createContext  中的初始值了
          debugger;
          return <div>from consumer</div>;
        }}
      </MyContext.Consumer>
    </div>
  );
}
export default Home;
